<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>库架信息</title>

    <script src="../utils/jquery-3.6.0.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>

    <link rel="stylesheet" href="../css/storeShelf.css">
</head>

<body>
    <div class="container-fluid">
        <!-- 左侧部分 -->
        <div class="left">

            <!-- logo -->
            <div class="logo">
                <img src="../images/logo.png" alt="">
                <h5>数字化档案管理</h5>
            </div>

            <!-- 导航 -->
            <div class="left-nav">
                <ul class="nav nav-pills nav-stacked">
                    <li><a href="./home.html">首界面</a>
                        <ul class="min-nav">
                            <li><a href="./home.html">首页看板</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="JavaScript:;">案卷管理</a>

                        <ul class="min-nav">
                            <li><a href="./management.html">签收管理</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="JavaScript:;">库房管理</a>
                        <ul class="min-nav">
                            <li><a href="./storeHouse.html">库房信息</a></li>
                            <li><a href="./storeShelf.html">库架信息</a></li>
                            <li><a href="./LayerInformation.html">层格信息</a></li>
                            <li><a href="./BoxInformation.html">盒子信息</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="JavaScript:;">入库管理</a>
                        <ul class="min-nav">
                            <li><a href="./File warehousing.html">档案入库</a></li>
                            <li><a href="./Inventory records.html">入库记录</a></li>
                            <li><a href="JavaScript:;">盒号打印</a></li>
                            <li><a href="./File number printing.html">档案号打印</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="JavaScript:;">档案管理</a>
                        <ul class="min-nav">
                            <li><a href="./archiveManagement.html">退/还案管理</a></li>
                            <li><a href="./archiveManagementDetail.html">退/还案明细</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="JavaScript:;">移库管理</a>
                        <ul class="min-nav">
                            <li><a href="./system-archives.html">档案移库</a></li>
                            <li><a href="./system-detail.html">移库明细</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="JavaScript:;">档案影像</a>
                        <ul class="min-nav">
                            <li><a href="JavaScript:;">影像查询</a></li>
                            <li><a href="JavaScript:;">影像录入</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="JavaScript:;">实体借阅</a>
                        <ul class="min-nav">
                            <li><a href="./entityBorrowapplication.html">借阅申请</a></li>
                            <li><a href="JavaScript:;">借阅审批</a></li>
                            <li><a href="JavaScript:;">借阅出库</a></li>
                            <li><a href="JavaScript:;">借阅归还</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="JavaScript:;">电子借阅</a>
                        <ul class="min-nav">
                            <li><a href="./BorrowingApply.html">借阅申请</a></li>
                            <li><a href="./BorrowingExamination.html">借阅审批</a></li>
                            <li><a href="./BorrowingDetail.html">借阅明细</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="JavaScript:;">统计报表</a>
                        <ul class="min-nav">
                            <li><a href="JavaScript:;">签收统计</a></li>
                            <li><a href="JavaScript:;">入库统计</a></li>
                            <li><a href="JavaScript:;">电子借阅统计</a></li>
                            <li><a href="JavaScript:;">实体借阅统计</a></li>
                            <li><a href="JavaScript:;">档案库存数统计</a></li>
                            <li><a href="JavaScript:;">档案状态统计</a></li>
                            <li><a href="JavaScript:;">用户登录统计</a></li>
                            <li><a href="JavaScript:;">影像上传统计</a></li>
                            <li><a href="JavaScript:;">影像浏览统计</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="JavaScript:;">日志管理</a>
                        <ul class="min-nav">
                            <li><a href="JavaScript:;">系统操作日志</a></li>
                            <li><a href="JavaScript:;">影像浏览日志</a></li>
                            <li><a href="JavaScript:;">影像上传日志</a></li>
                            <li><a href="JavaScript:;">用户登录日志</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="JavaScript:;">系统管理</a>
                        <ul class="min-nav">
                            <li><a href="./systemUser.html">用户管理</a></li>
                            <li><a href="./systemRole.html">角色管理</a></li>
                            <li><a href="./systemGrade.html">等级管理</a></li>
                            <li><a href="JavaScript:;">机构管理</a></li>
                            <li><a href="JavaScript:;">流程管理</a></li>
                            <li><a href="JavaScript:;">档案轨迹</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>



        <!-- 右侧部分 -->
        <div class="right">

            <!-- 右侧头部 -->
            <div class="right-header">
                <!-- 头部 -->
                <div class="row1">
                    <div class="header-left">
                        <img src="../images/nav.png" alt="">
                    </div>

                    <div class="header-right">
                        <img src="../images/message.png" alt="">
                        <div class="user">
                            <!-- 头像 -->
                            <img src="../images/user.jpg" alt="">
                            <span>Admin</span>
                        </div>
                    </div>
                </div>

                <!-- 面包屑导航 -->
                <ul class="breadcrumb">
                    <li><a href="#">库房管理</a></li>
                    <li><a href="./storeShelf.html">库架信息</a></li>
                </ul>
            </div>

            <!-- 右侧主体 -->
            <div class="right-body">
                <div class="right-content">
                    <!-- 查询、添加 -->
                    <div>
                        <form class="form-inline">
                            <!-- 编号查询 -->
                            <div class="form-group">
                                <label class="storeShelfId">库架编号</label>
                                <input type="text" class="form-control" id="storeShelfId" placeholder="请输入编号">
                            </div>

                            <!-- 库房状态 -->
                            <div class="form-group" id="storeShelfState">
                                <label>库架状态</label>
                                <div class="dropdown">
                                    <button class="btn btn-default dropdown-toggle shelfState" type="button"
                                        id="dropdownMenu1" data-toggle="dropdown">
                                        全部
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a class="all">全部</a></li>
                                        <li><a class="on">可用</a></li>
                                        <li><a class="off">不可用</a></li>
                                    </ul>
                                </div>
                            </div>

                            <button type="button" class="btn btn-primary" id="search">查询</button>
                            <button type="button" class="btn btn-primary" id="reset">重置</button>
                            <br>
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal"
                                id="add">新增库架</button>
                        </form>
                    </div>

                    <!-- 表格 -->
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>库房号</th>
                                    <th>库架号</th>
                                    <th>层格总数</th>
                                    <th>已用层格数</th>
                                    <th>已放案卷数</th>
                                    <th>状态</th>
                                    <th>归档年份</th>
                                    <th>创建人</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>

                            <tbody>
                                <!-- <tr>
                                    <td>1</td>
                                    <td>CK001</td>
                                    <td>市南仓库</td>
                                    <td>100</td>
                                    <td>5</td>
                                    <td>1234</td>
                                    <td>
                                        <div class="switch-box true">
                                            <div class="switch"></div>
                                        </div>
                                    </td>
                                    <td>2022</td>
                                    <td>Admin</td>
                                    <td>创建时间</td>
                                    <td><a id="detail">查看</a> <a id="edit">编辑</a> <a id="del">删除</a></td>
                                </tr> -->
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div class="page">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li>
                                    <a href="#" class="prev">
                                        <span>&laquo;</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="next">
                                        <span>&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改 -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">库架信息修改</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label>编号</label>
                            <input disabled type="text" class="form-control editId">
                        </div>
                        <div class="form-group">
                            <label>库房号</label>
                            <input type="text" class="form-control editwarehouseId">
                        </div>
                        <div class="form-group">
                            <label>库架号</label>
                            <input type="text" class="form-control editShelfId">
                        </div>
                        <div class="form-group">
                            <label>层格总数</label>
                            <input type="text" class="form-control editLayers">
                        </div>
                        <div class="form-group">
                            <label>已用层格数</label>
                            <input type="text" class="form-control editUsedLayers">
                        </div>
                        <div class="form-group">
                            <label>已放案卷数</label>
                            <input type="text" class="form-control editRecords">
                        </div>
                        <div class="form-group">
                            <label>归档年份</label>
                            <input type="text" class="form-control editYear">
                        </div>
                        <div class="form-group">
                            <label>创建人</label>
                            <input type="text" class="form-control editFounder">
                        </div>
                        <div class="form-group">
                            <label>创建时间</label>
                            <input type="datetime" class="form-control editTime">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary editSaveBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加 -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新增库架信息</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label>编号</label>
                            <input type="text" class="form-control addId">
                        </div>
                        <div class="form-group">
                            <label>库房号</label>
                            <input type="text" class="form-control addwarehouseId">
                        </div>
                        <div class="form-group">
                            <label>库架号</label>
                            <input type="text" class="form-control addShelfId">
                        </div>
                        <div class="form-group">
                            <label>层格总数</label>
                            <input type="text" class="form-control addLayers">
                        </div>
                        <div class="form-group">
                            <label>已用层格数</label>
                            <input type="text" class="form-control addUsedLayers">
                        </div>
                        <div class="form-group">
                            <label>已放案卷数</label>
                            <input type="text" class="form-control addRecords">
                        </div>
                        <div class="form-group">
                            <label>归档年份</label>
                            <input type="text" class="form-control addYear">
                        </div>
                        <div class="form-group">
                            <label>创建人</label>
                            <input type="text" class="form-control addFounder">
                        </div>
                        <div class="form-group">
                            <label>创建时间</label>
                            <input type="datetime" class="form-control addTime">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary addSaveBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 查看 -->
    <div class="modal fade" id="detailModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">库架信息</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label>编号</label>
                            <input disabled type="text" class="form-control detailId">
                        </div>
                        <div class="form-group">
                            <label>库房号</label>
                            <input type="text" class="form-control detailwarehouseId">
                        </div>
                        <div class="form-group">
                            <label>库架号</label>
                            <input type="text" class="form-control detailShelfId">
                        </div>
                        <div class="form-group">
                            <label>层格总数</label>
                            <input type="text" class="form-control detailLayers">
                        </div>
                        <div class="form-group">
                            <label>已用层格数</label>
                            <input type="text" class="form-control detailUsedLayers">
                        </div>
                        <div class="form-group">
                            <label>已放案卷数</label>
                            <input type="text" class="form-control detailRecords">
                        </div>
                        <div class="form-group">
                            <label>归档年份</label>
                            <input type="text" class="form-control detailYear">
                        </div>
                        <div class="form-group">
                            <label>创建人</label>
                            <input type="text" class="form-control detailFounder">
                        </div>
                        <div class="form-group">
                            <label>创建时间</label>
                            <input type="datetime" class="form-control detailTime">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/storeShelf.js"></script>
</body>

</html>